<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div
        class="swiper-slide"
        v-for="(image, index) in SlideImageData.data"
        :key="index"
      >
        <img :src="image" alt="Slide image" />
      </div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
</template>
<script>
// 导入 Swiper 样式
import "swiper/swiper-bundle.min.css";
import Swiper from "swiper";
export default {
  props: {
    SlideImageData: {
      type: Object,
      required: true,
    },
  },

  mounted() {
    // 如果 SlideImageData 已经有数据，直接初始化 Swiper
    if (
      this.SlideImageData &&
      this.SlideImageData.data &&
      this.SlideImageData.data.length > 0
    ) {
      this.initSwiperWithNextTick();
    }
  },
  watch: {
    // 监听 SlideImageData 的变化，数据变化后再重新初始化 Swiper
    SlideImageData: {
      deep: true,
      immediate: true,
      handler() {
        if (
          this.SlideImageData &&
          this.SlideImageData.data &&
          this.SlideImageData.data.length > 0
        ) {
          this.initSwiperWithNextTick();
        }
      },
    },
  },
  methods: {
    //初始化swiper轮播图
    initSwiperWithNextTick() {
      this.$nextTick(() => {
        this.swiper = new Swiper(".swiper-container", {
          loop: true,
          pagination: {
            el: ".swiper-pagination",
            clickable: true,
          },
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
          },
          autoplay: {
            delay: 3000,
          },
        });
        // 确保在 Swiper 初始化后更新
        this.swiper.update();
      });
    },
  },
};
</script>
<style lang="css">
.swiper-container {
  width: 1226px;
  height: 540px;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f3f3f3;
}

.swiper-slide img {
  width: 100%;
  height: flex;
  object-fit: contain; /* 保持原始宽高比 */
}
</style>
